<template>
  <div style="margin: auto;margin-top: -55px">
    <div style="height: 45px;background-color: #02A774;margin-top: 0px">
      <font color="#f0f8ff" size="5px" style="margin: 0 auto;">搜索</font>
    </div>
    <div style="height: 10px">
    </div>
    <div style="height: 41px">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item >
          <el-input v-model="formInline.m_name" placeholder="请输入商家"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="selAllMerchantByName">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="height: 10px">

    </div>
    <p v-for="(lm,i) in merchantsList" @click="merchant(lm)">
      <el-container style="background-color: red;height: 110px">
        <el-aside  style="background-color: #66B1FF;height: 100%;width:35% ">
          <img src="../assets/7777.jpeg" style="width: 80%;height:70%;margin-top: 15px">
        </el-aside>
        <el-main style="background-color: #02A774;height: 100%;width: 65%">
          <el-row style="width: 100%;height: 50%;background-color: cadetblue;margin-top: 0px">
            <el-col :span="24"><div class="grid-content bg-purple-dark">{{lm.m_name}}</div></el-col>
          </el-row >
          <el-row style="width: 100%;height: 30%;background-color: goldenrod;margin-top: 0px">
            <el-col :span="24"><div class="grid-content bg-purple-dark">
              <i class="el-icon-star-on" style="color: red"><font size="2px">{{lm.m_score}}</font></i>&nbsp&nbsp&nbsp<font size="2px">月售{{lm.m_sale}}</font>
            </div></el-col>
          </el-row>
          <el-row  style="width: 100%;height: 30%;background-color: darkgray;margin-top: 0px">
            <el-col :span="24"><div class="grid-content bg-purple-dark">
              <font size="2px"> 配送费<font color="red">￥</font>&nbsp{{lm.m_deliveryprice}}&nbsp&nbsp 距离&nbsp&nbsp{{lm.m_instance}}&nbspkm</font>
            </div></el-col>
          </el-row>
        </el-main>
      </el-container>
    </p>
    <div style="height: 70px;background-color: #f9fafc" class="fixed">
      <div style="float: left;width: 25%" @click="myIndex()">
        <div>
          <el-button  type="primary" icon="el-icon-s-home" style="background-color: #f9fafc;color: #66B1FF"></el-button>
        </div>
        <div>
          外卖
        </div>
      </div>
      <div style="float: left;width: 25%">
        <div>
          <el-button  type="primary" icon="el-icon-search" style="background-color: #f9fafc;color: #66B1FF"></el-button>
        </div>
        <div>
          搜索
        </div>
      </div>
      <div style="float: left;width: 25%" @click="myOrder()">
        <div>
          <el-button  type="primary" icon="el-icon-s-order" style="background-color: #f9fafc;color: #66B1FF"></el-button>
        </div>
        <div>
          订单
        </div>
      </div>
      <div style="float: left;width: 25%" @click="my()">
        <div>
          <el-button  type="primary" icon="el-icon-s-custom" style="background-color: #f9fafc;color: #66B1FF"></el-button>
        </div>
        <div>
          我的
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  export default {
    data() {
      return {
        formInline: {
          m_name: '',
        },
        merchantsList: [
          {
            m_id:"",
            m_name:"",
            m_sale:"",
            m_deliveryprice:"",
            m_image:"",
            m_instance:"",
            m_score:"",
          }
        ]
      }
    },
    methods: {

      myIndex(){
        this.$router.push({name: "index"});
      },
      myOrder(){
        this.$router.push({name: "order"});
      },
      my(){
        this.$router.push({name: "my"});
      },
      selAllMerchantByName() {
        var _this = this;
        axios.get("/waimai/MerchantController/selAllMerchantByName/"+this.formInline.m_name).then(function (res) {
          _this.merchantsList = res.data;
        })
      },
    }
  }
</script>

<style scoped>
  /*将div固定底部  css*/
  .fixed{ position:fixed;
    left:0px;
    bottom:0px;
    width:100%;
    height:50px;
    background-color:#000;
    z-index:9999;
  }
</style>
